<template>
    <div class="tile-container">
        <div v-for="fileInfo in fileInfos">
            <TileFile :entrie=fileInfo.fileEntry :iconBase64=fileInfo.iconBase64 />
        </div>
    </div>
</template>

<script setup lang="ts">
import { readDir, BaseDirectory, exists, createDir } from '@tauri-apps/api/fs';
import { ref, Ref, onMounted } from "vue";
import { invoke } from "@tauri-apps/api/tauri";
import { FileInfo } from "../domain/index"

import TileFile from "../components/unit/TileFile.vue"


// 文件夹中的文件
const fileInfos: Ref<FileInfo[]> = ref([])


const openDir = async () => {
    const exs = await exists('tiles', { dir: BaseDirectory.AppData })
    if (!exs) {
        await createDir('tiles', { dir: BaseDirectory.AppData, recursive: true });
        console.log('创建文件夹');
    }
    let entries = await readDir('tiles', { dir: BaseDirectory.AppData, recursive: true });

    entries.forEach(async element => {
        let base64: string = await invoke("get_icon_base64", { path: element.path });
        let f = new FileInfo();
        f.fileEntry = element;
        f.iconBase64 = base64;
        fileInfos.value.push(f)
    });
}


onMounted(async () => {
    openDir()
})

</script>


<style scoped>
.tile-container {
    width: 90vw;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
}
</style>